<template>
	<view class="dmm-container-grey dmm-container">
	    <view class="header">
	      <image class="avatar-img" src="/static/imgs/avatar.png" alt="" />
	
	      <view class="userInfo" @click="uniHistory.push(showAuthStatus ? '/pages/auth/result' : '')">
	        <view class="name">
						<text class="text">{{agentInfo.agentName || agentInfo.agentMobile}}{{agentInfo.agentStatus !== '3' ? '/' : ' '}}{{agentStatusEnum[agentInfo.agentStatus]}}</text>
	          
	          <image class="image" v-if="showAuthStatus" src="/static/imgs/icon_right_arrow.png" alt="" />
	        </view>
	        <text class="superior">我的团队长：{{agentInfo.upperAgentName || '--'}}</text>
	      </view>
	    </view>
	
	    <view class="data section">
	      <view class="total">
	        <view class="total-title" @click="uniHistory.push('/pages/merchantTrade/index')">
	          <text class="text">本月团队商户交易额</text>
	          <image class="image" src="/static/imgs/icon_right_arrow.png" alt="" />
	        </view>
	        <text class="total-amt">￥ {{agentInfo.mount}}</text>
	      </view>
	
	      <view class="sub">
	        <view class="total-orgs">
	          <text class="text">团队代理商数</text>
						<view class="dmm-space"></view>
	          <text class="text">{{agentInfo.agentNum}}</text>
	        </view>
	
	        <view class="active-orgs">
	          <text class="text">活跃商户数</text>
						<view class="dmm-space"></view>
	          <text class="text">{{agentInfo.activeMerchantNum}}</text>
	        </view>
	      </view>
	    </view>
	
	    <view class="space"></view>
	
	    <view class="section">
	      <view class="menus">
	        <view class="menu-item mgb" @click="uniHistory.push('/pages/expand/expandMerchant')">
	          <image class="image" src="/static/imgs/icon_expand_merchant.png" alt="" /> <text class="text">商户拓展</text>
	        </view>
	        <view class="menu-item mgb" @click="uniHistory.push('/pages/expand/expandAgent')">
	          <image class="image" src="/static/imgs/icon_team.png" alt="" /> <text class="text">团队组建</text>
	        </view>
	        <view class="menu-item mgb" @click="uniHistory.push('/pages/merchantManage/index')">
	          <image class="image" src="/static/imgs/icon_merchant.png" alt="" /> <text class="text">商户管理</text>
	        </view>
	
	        <view class="menu-item" @click="uniHistory.push('/pages/agentManage/index')">
	          <image class="image" src="/static/imgs/icon_angent.png" alt="" /> <text class="text">代理商管理</text>
	        </view>
	        <view class="menu-item" @click="uniHistory.push('/pages/deviceManage/index')">
	          <image class="image" src="/static/imgs/icon_device.png" alt="" /> <text class="text">设备管理</text>
	        </view>
	        <view class="menu-item" @click="uniHistory.push('/pages/transferManage/index')">
	          <image class="image" src="/static/imgs/icon_transfer.png" alt="" /> <text class="text">划拨管理</text>
	        </view>
	      </view>
	    </view>
	
	    <view class="space"></view>
	
	    <view class="mine section">
	      <u-cell-group :border="false">
					<u-cell icon="setting-fill" title="我的结算价" >
						<text slot="value" class="agentRate">{{agentInfo.rate}}%</text>
						<image class="image" slot="icon" src="/static/imgs/icon_yuan.png" mode=""></image>
					</u-cell>
					<u-cell icon="integral-fill" title="收益" isLink url="/pages/income/index">
						<image class="image" slot="icon" src="/static/imgs/icon_income.png" mode=""></image>
					</u-cell>
					<u-cell icon="integral-fill" title="我的" isLink url="/pages/mine/index">
						<image class="image" slot="icon" src="/static/imgs/icon_mine.png" mode=""></image>
					</u-cell>
				</u-cell-group>
	    </view>
			
			<view class="">
				<u--input placeholderStyle="color: #d7d7d7;" v-model="authStep"></u--input>
				<u-button type="primary" text="实名认证" @click="uniHistory.push('/pages/auth/auth' + authStep)"></u-button>
				
			</view>
	
	  </view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	import {agentStatusEnum} from '@/common/constants';
	
	export default {
		data() {
			return {
				agentStatusEnum,
				authStep: 1,
			};
		},
		
		props: {},
		
		computed: {
			...mapState('home', ['agentInfo']),
			showAuthStatus: function() {
				return ['2', '4'].includes(this.agentInfo.agentStatus)
			}
		},
		
		methods: {
			...mapActions('home', ['getAgentInfo'])
		},
		
		created() {
			this.getAgentInfo()
		}
	}
</script>

<style lang="scss">
	.dmm-container-grey {
	  font-family: PingFang SC, PingFang SC-Medium;
	  box-sizing: border-box;
		
		.text {
			font-size: 28rpx;
		}
	}
	
	.space {
	  background-color: $u-bg-color;
	}
	
	.header {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  margin-bottom: 46rpx;
	  padding: 0 50rpx;
	
	  .avatar-img {
	    height: 128rpx;
	    width: 128rpx;
	    margin-right: 19rpx;
	  }
	
	  .userInfo {
	    .name {
				display: flex;
				flex-direction: row;
				align-items: center;
	      margin-bottom: 28rpx;
				.text {
					text-align: left;
					font-size: 34rpx;
					line-height: 34rpx;
					font-weight: 700;
					margin-right: 8rpx;
				}
	      .image {
	        height: 24rpx;
	        width: 16rpx;
	      }
	    }
	
	    .superior {
	      color: $uni-text-color-muted;
	      font-size: 24rpx;
	    }
	  }
	}
	
	.section {
	  padding: 50rpx 43rpx;
	  background-color: #fff;
	  border-radius: 32rpx;
	}
	
	.total {
	  margin-top: 36rpx;
	  text-align: center;
	  border-bottom: 1rpx solid $u-border-color;
	
	  .total-title {
	    display: flex;
			flex-direction: row;
	    margin-bottom: 25rpx;
	    justify-content: center;
	    align-items: center;
			.text {
				font-size: 28rpx;
				font-weight: 700;
			}
	    .image {
	      display: block;
	      margin-left: 10rpx;
	      height: 24rpx;
	      width: 18rpx;
	    }
	  }
	  .total-amt {
			text-align: center;
	    font-size: 80rpx;
	    color: #f6ecba;
	  }
	}
	
	.sub {
	  display: flex;
		flex-direction: row;
		
	
	  .total-orgs,
	  .active-orgs {
	    width: 336rpx;
	    height: 80rpx;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    margin-top: 42rpx;
	
	    .text:first-child {
	      font-size: 28rpx;
	      color: $uni-text-color-grey;
	    }
	
	    .text {
	      color: $u-main-color;
	    }
	  }
	
	  .total-orgs {
	    border-right: 1px dotted $u-border-color;
	  }
	}
	
	.menus {
	  display: flex;
		flex-direction: row;
	  flex-wrap: wrap;
	
	  .menu-item {
	    width: 33.33%;
	    display: flex;
			flex-direction: row;
	    align-items: center;
	    height: 42rpx;
			.text {
				font-size: 28rpx;
				font-weight: 700;
			}
	
	    &.mgb {
	      margin-bottom: 37rpx;
	    }
	
	    .image {
	      height: 42rpx;
	      width: 42rpx;
	      margin-right: 13rpx;
	    }
	  }
	}
	
	.mine {
		padding-top: 0;
		padding-bottom: 0;
		
		.u-cell {
			/deep/ .u-cell__body {
				padding: 38rpx 0;
				
				.u-cell__title-text {
					font-size: $uni-font-size-base;
					font-weight: 700;
					color: $u-main-color;
				}
			}
			
			.image {
				height: 42rpx;
				width: 42rpx;
				margin-right: 16rpx;
			}
			
			.agentRate {
				color: $u-primary;
				font-size: 28rpx;
				font-weight: 700;
			}
		}
		
	  
	  .title {
	    display: flex;
	    align-items: center;
	    .image {
	      height: 42rpx;
	      width: 42rpx;
	      margin-right: 21rpx;
	    }
	  }
	}
</style>
